// 频道管理页面

 <template>
  <div class="catemanage">
    <myheader title="频道管理">
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
    </myheader>
    <div class="mychannel">
      <h4 class="stitle">点击删除以下频道</h4>
      <div class="list list_del">
        <span
          v-for="(value,index) in mycateList"
          :key="value.id"
          @click="del(value,index)"
        >{{value.name}}</span>
      </div>
    </div>
    <div class="youchannel">
      <h4 class="stitle">点击添加以下频道</h4>
      <div class="list list_add">
        <span
          v-for="(value,index) in youcateList"
          :key="value.id"
          @click="add(value,index)"
        >{{value.name}}</span>
      </div>
    </div>
  </div>
</template>
 
 <script>
import myheader from "@/components/myheader.vue";

// 引入请求方法
import { getCateList } from "@/apis/cate";
export default {
  components: {
    myheader,
  },
  data() {
    return {
      // 用户已添加的栏目
      mycateList: [],
      // 用户未添加的栏目
      youcateList: [],
    };
  },
  async mounted() {
    // key:my_toutiao_cateSave_52:用户的栏目数据my_toutiao_cateNotHas_52:用户未添加的栏目数据
    // 先获取本地存储数据
    console.log("本地存储" + localStorage.getItem("my_toutiao_cateSave_52"));
    this.mycateList = JSON.parse(
      localStorage.getItem("my_toutiao_cateSave_52") || "[]"
    );
    // console.log(this.mycateList);// __proto__: Array
    this.youcateList = JSON.parse(
      localStorage.getItem("my_toutiao_cateNotHas_52") || "[]"
    );
    if (this.mycateList.length == 0) {
      // 如果本地没有存储，就向服务器请求
      // 获取栏目数据
      let res = await getCateList();
      console.log(res);
      this.mycateList = res.data.data;

      //注意： 删除的是后台的数据，所以需要先向服务器发送请求再删除；而不能删除本地存储数据

      // 如果登陆过就有token，删除关注 和 头条；没有登陆过，删除头条
      let token = localStorage.getItem("news");
      if (token) {
        this.mycateList.splice(0, 2);
      } else {
        this.mycateList.splice(0, 1);
      }
    }
  },
  methods: {
    del(value, index) {
      // 先添加到 未添加的栏目 ；再删除在 已添加的栏目 的值
      this.youcateList.push(value);
      this.mycateList.splice(index, 1);
      localStorage.setItem(
        "my_toutiao_cateSave_52",
        JSON.stringify(this.mycateList)
      );
      localStorage.setItem(
        "my_toutiao_cateNotHas_52",
        JSON.stringify(this.youcateList)
      );
    },
    add(value, index) {
      // 先添加到 已添加的栏目 ；再删除在 未添加的栏目 的值
      this.mycateList.push(value);
      this.youcateList.splice(index, 1);
      localStorage.setItem(
        "my_toutiao_cateSave_52",
        JSON.stringify(this.mycateList)
      );
      localStorage.setItem(
        "my_toutiao_cateNotHas_52",
        JSON.stringify(this.youcateList)
      );
    },
  },
};
</script>
 <style lang="less" scoped>
.catemanage {
  width: 100vw;
  height: 100vh;
  background-color: rgba(248, 248, 248, 1);
  .mychannel,
  .youchannel {
    margin: 0 14px;
    .stitle {
      color: #ccc;
      font-size: 16px;
      line-height: 45px;
    }
    > .list {
      display: flex;
      flex-wrap: wrap;
      > span {
        display: flex;
        border: 1px solid #ddd;
        padding: 8px 10px;
        font-size: 18px;
        margin: 5px;
        &:first-child {
          background-color: #f6f6f6;
        }
      }
    }
  }
}
</style>